<template>
  <div id="myChart123" :style="{ height: '248px' }"></div>
</template>

<script lang="ts" setup>
// 引入echarts
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps({
  info: {
    type: Object,
  },
});
// console.log(props.info.statistics);
onMounted(() => {
  let nameData = [];
  let keyData = [];

  for (let key in props.info.statistics) {
    nameData.push(key);
    keyData.push(props.info.statistics[key]);
  }
  let myChart = echarts.init(document.getElementById('myChart123'));
  // 绘制图表
  myChart.setOption({
    color: ['#E62B17'],
    legend: {
      data: ['近7日访问量趋势'],
    },
    xAxis: {
      offset: 0,
      axisLine: {
        onZero: false,
        show: false,
      },

      axisTick: {
        show: false,
      },
      type: 'category',
      boundaryGap: false,
      data: nameData,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#f1f1f1',
          width: 1.5,
        },
      },
      axisTick: {
        show: false,
        lingth: 9,
      },
      type: 'value',
    },
    grid: {
      x: 25,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1,
    },
    series: [
      {
        data: keyData,
        type: 'line',
        smooth: true,
        areaStyle: {},
      },
    ],
  });
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
});
</script>
